<template>
	<div>
		<el-dialog
			:title="title"
			:visible.sync="visible"
			append-to-body
			width="50%"
			:before-close="dialogBeforeClose"
			:close-on-click-modal="false"
			@closed="handlerClosed"
		>
			<el-form
				ref="form"
				:model="formData"
				:rules="rules"
				label-width="80px"
				:inline="false"
				size="normal"
			>
				<el-form-item label="参数编码" prop="spCode">
					<el-input v-model="formData.spCode" clearable />
				</el-form-item>
				<el-form-item label="参数名称" prop="spName">
					<el-input v-model="formData.spName" clearable />
				</el-form-item>
				<el-form-item label="参数内容" prop="spValue">
					<el-input v-model="formData.spValue" clearable />
				</el-form-item>
				<el-form-item label="是否启用" prop="whetherEnable">
					<el-select
						v-model="formData.whetherEnable"
						placeholder="请选择"
						clearable
					>
						<el-option
							v-for="item in whetherEnableOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="formData.remark" clearable />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="medium" @click="onSubmit">
						确定
					</el-button>
					<el-button size="medium" @click="handlerCancel"> 取消 </el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import { getParamModel } from '@/http/param'
export default {
	props: {
		paramData: {
			type: Object,
			default: () => {
				return {}
			},
		},
		visible: {
			type: Boolean,
			default: false,
		},
		title: {
			type: String,
			default: '',
		},
		paramDialogType: {
			type: String,
			default: '',
		},
	},
	data() {
		var spCodeValidator = this.spCodeFun
		return {
			rules: {
				spCode: [
					{ required: true, message: '请输入参数编码', trigger: 'blur' },
					{ validator: spCodeValidator, trigger: 'blur' },
				],
				spName: [
					{ required: true, message: '请输入参数名称', trigger: 'blur' },
				],
				spValue: [
					{ required: true, message: '请输入参数内容', trigger: 'blur' },
				],
				orgUuid: [{ required: true, message: '请选择机构', trigger: 'blur' }],
				whetherEnable: [
					{ required: true, message: '请选择是否启用', trigger: 'blur' },
				],
			},
			paramOrgList: [
				{
					id: '0',
					orgName: '公共机构',
				},
				{ id: '-1', orgName: '本机构' },
			],
			whetherEnableOptions: [
				{
					value: '1',
					label: '否',
				},
				{
					value: '0',
					label: '是',
				},
			],
		}
	},
	computed: {
		formData() {
			return this.paramData
		},
	},
	methods: {
		spCodeFun(rule, value, callback) {
			getParamModel({ spCode: value }).then(({ data }) => {
				if (data?.head?.code == 200) {
					if (Object.keys(data?.data || {}).length > 0) {
						if (this.formData.id != data.data.id) {
							callback(new Error('该编码已经存在'))
						} else {
							callback()
						}
					} else {
						callback()
					}
				}
			})
		},
		handlerClosed() {},
		dialogBeforeClose() {
			this.$emit('update:visible', false)
			if (this.parentOrg) {
				this.$emit('update:parentOrg', {})
			}
			this.$emit('update:paramData', {
				spName: '',
				spCode: '',
				spValue: '',
				orgUuid: '0',
				remark: '',
				whetherEnable: '0',
			})
			this.handlerResetFields()
		},
		onSubmit() {
			this.$refs.form.validate(valid => {
				if (valid) {
					this.formData.orgUuid =
						this.formData.orgUuid == '-1' ? null : this.formData.orgUuid
					this.$emit('submit', this.formData, this.paramDialogType)
				} else {
					return false
				}
			})
		},
		handlerCancel() {
			this.handlerResetFields()
			this.dialogBeforeClose()
		},
		handlerResetFields() {
			this.$nextTick(() => {
				this.$refs['form'].clearValidate()
			})
		},
	},
}
</script>

<style lang="scss" scoped></style>
